<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Demo: canvas grid</title>
    <meta name="description" content="flyxiang">
    <link rel="shortcut icon" type="image/x-icon" href="http://flyxiang.org/www/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://flyxiang.org/www/img/flyxiang_57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://flyxiang.org/www/img/flyxiang_72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://flyxiang.org/www/img/flyxiang_114.png">
<style>
	body {
	font-family: 'Open Sans',sans-serif;
	color:#333;
	background:#EDEDED;
	-webkit-text-size-adjust: none;
}
/*Custom text-selection colors*/
::-moz-selection {background: #F04530; color: #fff; text-shadow: none;}
::selection {background: #F04530; color: #fff; text-shadow: none;} 
a {
	color:#346AA8;
	text-decoration:none;
}

a:hover,
a:focus,
a:active {
	text-decoration:none;
}
h1 {
	text-align: center;
	margin-bottom: 20px;
}
h1 a {
	font-size: 30px;
	font-weight: 400;
	text-decoration: none;
	color: #5FA4A0
}
h1 a:hover {
	color: #5FA4A0
}
.container {
	width: 501px;
	height: 371px;
	margin: 0 auto;
}
.ipt {
	width: 100%;
	border: #e2e2e2 1px solid;
	font-size: 1.2em;
	padding: 6px;
	border-radius: 2px;
}
footer {
	padding: 0 2em;
	font-size: 10px;
}
</style>
</head>
<body>
<div class="svg"></div>
<script defer>
// insert SVG using script until SVG in HTML5 is more widely supported
// (currently supported in IE 9 and Firefox nightlies only)
var container = document.getElementsByClassName('svg')[0];
var svgns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgns, 'svg');
svg.setAttribute('width', '300px');
svg.setAttribute('height', '300px');

// our linearGradient
var defs = document.createElementNS(svgns, 'defs');
var gradient = document.createElementNS(svgns, 'linearGradient');
gradient.setAttribute('id', 'myGradient');
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '100%');
gradient.setAttribute('x2', '100%');
gradient.setAttribute('y2', '0%');
var stop = document.createElementNS(svgns, 'stop');
stop.setAttribute('offset', '5%');
stop.setAttribute('stop-color', 'red');
gradient.appendChild(stop);
stop = document.createElementNS(svgns, 'stop');
stop.setAttribute('offset', '95%');
stop.setAttribute('stop-color', 'blue');
stop.setAttribute('stop-opacity', '0.5');
gradient.appendChild(stop);
defs.appendChild(gradient);
svg.appendChild(defs);

// our example circle
var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('cx', '50%');
circle.setAttribute('cy', '50%');
circle.setAttribute('r', 100);
circle.setAttribute('fill', 'url(#myGradient)');
circle.setAttribute('stroke-color', 'red');
circle.addEventListener('mousedown', function() {
  alert('hello');
}, false);
svg.appendChild(circle);
container.appendChild(svg);
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28937623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>